<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>

<script>
  import colorTool from '@/utils/color'
  export default {
    name: "App",
    created() {
      //设置主题颜色
      var app_color = this.$CONFIG.COLOR || this.$TOOL.data.get("APP_COLOR");
      console.info("app_color:" + app_color)
      if (app_color == null || app_color == undefined || app_color == "") {
        app_color = "#409EFF";
      }

      if (app_color) {
        document.documentElement.style.setProperty(
          "--el-color-primary",
          app_color
        );
        for (let i = 1; i <= 9; i++) {
          document.documentElement.style.setProperty(
            `--el-color-primary-light-${i}`,
            colorTool.lighten(app_color, i / 10)
          );
        }
        document.documentElement.style.setProperty(
          `--el-color-primary-darken-1`,
          colorTool.darken(app_color, 0.1)
        );
      }

      var script = document.createElement("script");
      //设置标签的type属性
      script.type = "text/javascript";
      //设置标签的链接地址
      script.src = "https://map.qq.com/api/js?v=2.exp&key=PYWBZ-QHE3I-L7WGT-5THCC-KOPH7-Y6FSC";
      //添加标签到dom
      document.body.appendChild(script);

    },
  };
</script>

<style>
  #app {
    font-family: Avenir, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  .el-table .el-table__body .el-table__cell {
    padding: 3px 0;
  }

  .pagination {
    margin-top: 15px;
  }

  .el-container .el-main {
    padding: 10px;
  }

  [v-cloak] {
    display: none;
  }

  .content-wrapper {
    overflow: hidden;
  }

  .content-header {
    padding: 0;
  }

  /* 导航 */
  .navigation {
    height: 60px;
    line-height: 60px;
    background-color: #f9f9f9;
    padding-left: 10px;
  }

  .navigation i {
    color: #d9dee5;
    display: inline-block;
    font-size: 14px;
    color: #666666;
    font-style: normal;
  }

  .navigation i::after {
    content: "/";
    display: inline-block;
    margin: 0 5px;
  }

  .navigation span {
    font-weight: 700;
    font-size: 14px;
    color: #666666;
  }

  .content {
    background-color: #ecf0f5;
    overflow: auto;
    margin: 0px;
    border-radius: 1px;
  }

  /* 商品资料 */
  .goods {
    background-color: #fff;
    padding: 10px 15px;
    overflow: auto;
  }

  /* 搜索 */
  .search {
    background-color: #fff;
    padding: 10px 0px;
    box-sizing: border-box;
    border-radius: 1px;
    margin-bottom: 10px;
  }

  .data-content {
    border: 1px solid #ebeef5;
    background-color: #fff;
    color: #303133;
    -webkit-transition: 0.3s;
    transition: 0.3s;
    padding: 10px;
  }

  .tool-add {
    padding: 0px;
  }

  .model-form {
    background-color: #fff;
    padding: 10px 10px;
    overflow: auto;
    border-radius: 1px;
    border: 1px solid #ebebeb;
    border-radius: 1px;
  }

  .model-content {
    margin-top: 20px;
  }

  /* 分页 */
  .page {
    text-align: right;
    margin-top: 10px;
  }

  .form-title {
    font-size: 14px;
    color: #666;
    margin-top: 10px;
    line-height: 35px;
    font-weight: 700;
  }

  .viewForm .el-form-item {
    margin-bottom: 0px;
  }

  .viewForm .el-form-item .el-form-item__label {
    color: #555;
    font-size: 14px;
    line-height: 25px;
  }

  .viewForm .el-form-item .el-form-item__content {
    font-size: 14px;
    color: #666;
    line-height: 25px;
  }

  .el-page-header__content {
    font-size: 14px;
  }

  .viewForm .el-form-item {
    margin-bottom: 0px;
  }

  .order-form-title {
    font-size: 14px;
    color: #666;
    margin-top: 20px;
    height: 35px;
    line-height: 35px;
    font-weight: 700;
  }

  .search .el-form .el-form-item {
    margin-bottom: 1px;
  }

  .el-button--text.danger {
    color: #f56c6c;
  }

  label {
    font-weight: 400;
  }

  .el-form-item__content {
    text-align: left;
  }
</style>
<style lang="scss">
  @import "@/style/style.scss";
  @import "@/style/theme/dark.scss";
</style>